<template>
  <hr />
  <div>
    <slot></slot>
  </div>
  <hr />
  <div>
    {{ viewdata.title }}
    --
    {{ info }}
    --
    {{ dept }}
    --
    {{ dept?.deptName }}
    <hr />
    <input type="text" v-model="viewdata.compinfo" />
    <button @click="changeInfo">传递事件和数据</button>
  </div>
  <hr />
  <div>
    <slot name="footer"></slot>
  </div>
</template>
<script lang="ts" setup>
import { Dept } from '../ts/Manage'

const emits = defineEmits(['change-info'])

defineProps({
  info: {
    type: String,
    default: '属性的默认值',
  },
  dept: {
    type: Dept,
  },
})

import { reactive } from 'vue'

const viewdata = reactive({
  title: '自定义组件',
  compinfo: '',
})

function changeInfo() {
  console.log('子组件点击事件：', viewdata.compinfo)
}
</script>
<style></style>
